<!--
 * @Author: 田鑫
 * @Date: 2023-02-20 13:58:48
 * @LastEditors: 田鑫
 * @LastEditTime: 2023-02-28 12:05:03
 * @Description: table示例
-->

<template>
  <div>
    <a-table v-bind="propsRes" v-on="propsEvent">
      <template #opeartion="{ record }">
        <div flex>
          <a-link>编辑</a-link>
          <ConfirmButton content="确定要删除该条数据吗？" popupType="error" @confirm-emit="deleteItem(record)">
            <a-link>删除</a-link>
          </ConfirmButton>
          <a-link>下载</a-link>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { fetchTableData, type IExample } from '@/api/example';
import useTableProps from '@/hooks/table-hooks';
import { Message } from '@arco-design/web-vue';
import { columnsData } from './columns';

const { propsRes, propsEvent, setProps, setColumns, setLoadListParams, loadTableData } =
  useTableProps<IExample.ITableResponse>(fetchTableData);
setProps({
  'row-key': 'id',
  'row-selection': {
    type: 'checkbox',
    showCheckedAll: true,
  },
  'selected-keys': [1, 2, 3],
});
setColumns(columnsData);
onMounted(async () => {
  await loadTableData();
});

function add() {
  Message.info('=sa');
}

function deleteItem(record) {}
</script>
<style lang="less" scoped></style>
